<template>
  <section>
    <el-row v-if="error || !show" class="show-loading">
      <el-col :span="24">
        <label :style="error? {'color': '#F56C6C'} : {'color': '#409EFF'}">
          <i :class="error? 'el-icon-warning' : 'el-icon-loading'"></i>
          {{error?'无法链接网络，请刷新页面':'载入中，请稍候...'}}
        </label>
      </el-col>
    </el-row>
    <transition name="el-zoom-in-center">
      <el-form v-show="show" :model="form" :rules="rule" ref="form" label-position="left" label-width="0px" class="login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="userId">
          <el-input type="text" v-model="form.userId" auto-complete="off" placeholder="用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="form.password" auto-complete="off" placeholder="密码"  @keyup.enter.native="login" />
        </el-form-item>

        <el-form-item prop="code">
          <el-row>
            <el-col :span="16">
              <el-input type="text" v-model="form.code" auto-complete="off" placeholder="验证码" />
            </el-col>
            <el-col :span="8" style="text-align: center;">
              <img v-if="form.src" :src="form.src" @click="getImageCode" style="padding-top:1px;" />
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item style="width:100%;">
          <el-button type="primary" style="width:100%;" @click.native.prevent="login" :loading="loginIng">登录</el-button>
        </el-form-item>
      </el-form>
    </transition>
  </section>
</template>

<style scoped="scoped"       lang="scss">
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 300px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    .title {
      margin: 0 auto 40px;
      text-align: center;
      color: #505458;
    }
  }

  .show-loading {
    background-clip: padding-box;
    margin: 200px auto;
    width: 100%;
    text-align: center;
  }
</style>
<script>
  let data = () =>{
    return {
      error: false,
      loginIng:false,
      show: false,
      form: {
        userId: null,
        password: null,

        code: null,
        sessionId: null,
        publicKey: null,
        src: null
      },
      rule: {
        userId: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '请输入验证码',
          trigger: 'blur'
        }],
      }
    }
  }

  let getImageCode = function() {
    this.$http.post('/admin/getImageCode').then(res => {
      if (!res.data.success) {
        this.$message({
          message: res.data.msg,
          type: 'error'
        });
        this.error = true
        return
      }
      this.form.src = 'data:image/gif;base64,' + res.data.data.image
      this.form.sessionId = res.data.data.sessionId
      this.show = true
    }).catch(() => this.error = true)
  }
  export default {
    data: data,
    methods: {
      getImageCode,
      login : function() {
        let me = this;
        me.$refs.form.validate((valid) => {
          if (!valid) {
            return false;
          }

          let param = {
            userId: me.form.userId,
            password: this.$Base64.encode(me.form.password),
            code: this.form.code,
            sessionId: this.form.sessionId
          }
          me.loginIng = true
          me.$http.post('/admin/login', param).then(res => {
            me.loginIng = false;
            if (!res.data.success) {
              me.$message({
                message: res.data.msg,
                type: 'error'
              });
              return
            }
            let body = res.data.data;
            sessionStorage.setItem('user', JSON.stringify(body))
            let token = body.token
            me.$http.defaults.headers[me.$constants.auth] = token
            me.$cookies.set(me.$constants.token, token)
            me.$router.push({
              path: '/'
            })
          }).catch(e => me.loginIng = false)
        })
      }

    },
    mounted: function() {
      this.show = true
      this.getImageCode()
    }
  }
</script>


